<template>
  <div class="home">
    <div class="bg">
      <img src="../assets/imgs/logoC.png" alt="logo" class="logoCls" />
      <div class="btn">
        <div class="btnContent heartbeat">
          <img src="../assets/imgs/btn.png" class="btnBg" alt="download" />
          <img src="../assets//imgs/font.png" class="btnFont" alt="download" />
        </div>
      </div>

      <div class="actives">
        <swiper
          :modules="modules"
          :pagination="{ clickable: true }"
          :autoplay="{
            delay: 500,
            disableOnInteraction: false,
            stopOnLastSlide: false,
          }"
          :slides-per-view="1"
          :space-between="50"
          :speed="1500"
          :loop="true"
          @swiper="onSwiper"
        >
          <swiper-slide v-for="item in topSliderList" :key="item.id">
            <img :src="item.img" :alt="item.img" />
          </swiper-slide>
        </swiper>
      </div>

      <div class="info">
        <div class="infoSelect">
          <div class="line"></div>
          <div
            class="selectItemCls"
            v-for="(item, index) in selectBar"
            :key="index"
            :class="{ isSelect: currentSelect == item.id }"
          >
            <p
              :style="{ color: item.id == currentSelect ? '#5477d1' : '' }"
              @click="currentSelect = item.id"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
        <div class="selectContent">
          <template v-for="(item, index) in selectBar" :key="index">
            <div
              v-if="item.id == currentSelect"
              class="contentItem"
              v-for="(element, location) in item.child"
              :key="location"
              @click="goToDetails(item.id, element.id)"
            >
              <p>{{ element.name }}</p>
              <p>{{ element.date }}</p>
            </div>
          </template>
          <p class="more" v-if="currentSelect !== 3">查看更多...</p>
        </div>
      </div>
    </div>
    <div class="page">
      <img src="../assets/imgs/logoC.png" alt="logo" class="logoCls" />
      <div class="big_sliders">
        <swiper
          :modules="modules"
          :autoplay="{
            delay: 500,
            disableOnInteraction: false,
            stopOnLastSlide: false,
          }"
          :initial-slide="1"
          :slides-per-view="2"
          :effect="'coverflow'"
          :centered-slides="true"
          :coverflow-effect="{
            rotate: 0,
            depth: 200,
            slideShadows: true,
          }"
          :space-between="10"
          :speed="1500"
          @swiper="onSwiperBig"
          @slideChange="slideChange"
        >
          <swiper-slide v-for="(item, index) in bottomSlider" :key="item.id"
            ><img
              :src="item.img"
              alt="item.img"
              class="bImage"
              :class="{ isSlide: curSlider == index }"
          /></swiper-slide>
        </swiper>
      </div>
      <div class="small_sliders">
        <div
          class="sliderItem"
          v-for="(item, index) in bottomSliderPage"
          :key="item.id"
        >
          <img
            :src="item.img"
            alt="item.img"
            class="sImage"
            :class="{ isSlide: curSlider == index }"
            @click="selectSlider(index)"
          />
        </div>
      </div>
      <div class="document">
        <p class="title">本公司游戏产品适合18岁（含）以上玩家娱乐</p>
        <div class="tips">
          <p>抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当</p>
          <p>适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>
        </div>

        <p class="reserved">Copyright ©2024 All Rights Reserved xd.com</p>
        <div class="company">
          <p>心动网络股份有限公司</p>
          <p>文网游备字[2016]Ｍ-SLG0183号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { loadAssetsURL } from "../utils/load-assets";
import {
  Autoplay,
  Pagination,
  EffectCoverflow,
  Controller,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/bundle";
import "swiper/css/effect-fade";
const modules = [Autoplay, Pagination, EffectCoverflow, Controller];
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const onSwiper = (swiper: any) => {};
const topSliderList = [
  {
    id: 1,
    img: loadAssetsURL("act1.png"),
  },
  {
    id: 2,
    img: loadAssetsURL("act2.png"),
  },
  {
    id: 3,
    img: loadAssetsURL("act3.png"),
  },
  {
    id: 4,
    img: loadAssetsURL("act4.png"),
  },
  {
    id: 5,
    img: loadAssetsURL("act5.png"),
  },
  {
    id: 6,
    img: loadAssetsURL("act6.png"),
  },
];
const curSlider = ref<number>(0);
const onSwiperBig = (swiper: any) => {
  mySwiperRef.value = swiper;
};
const slideChange = (swiper: any) => {
  curSlider.value = swiper.realIndex;
};
const bottomSlider = [
  {
    id: 1,
    img: loadAssetsURL("big-1.png"),
  },
  {
    id: 2,
    img: loadAssetsURL("big-2.png"),
  },
  {
    id: 3,
    img: loadAssetsURL("big-3.png"),
  },
  {
    id: 4,
    img: loadAssetsURL("big-4.png"),
  },
];
const bottomSliderPage = [
  {
    id: 1,
    img: loadAssetsURL("1.png"),
  },
  {
    id: 2,
    img: loadAssetsURL("2.png"),
  },
  {
    id: 3,
    img: loadAssetsURL("3.png"),
  },
  {
    id: 4,
    img: loadAssetsURL("4.png"),
  },
];
const mySwiperRef = ref<any>(null);

const currentSelect = ref<number>(1);
const selectBar: any = [
  {
    name: "游戏资讯",
    id: 1,
    child: [
      {
        id: 1,
        name: "《梅林的预言》城市介绍",
        date: "2023-11-25",
      },
      {
        id: 2,
        name: "《梅林的预言》军令系统",
        date: "2023-11-25",
      },
      {
        id: 3,
        name: "《梅林的预言》特色玩法",
        date: "2023-11-25",
      },
      {
        id: 4,
        name: "《梅林的预言》游戏介绍",
        date: "2023-11-25",
      },
      {
        id: 5,
        name: "《梅林的预言》战役系统",
        date: "2023-11-25",
      },
      {
        id: 6,
        name: "《梅林的预言》装备系统",
        date: "2023-11-25",
      },
    ],
  },
  {
    name: "游戏攻略",
    id: 2,
    child: [
      {
        id: 1,
        name: "《梅林的预言》常见问题",
        date: "2023-11-25",
      },
      {
        id: 2,
        name: "《梅林的预言》个人矿山",
        date: "2023-11-25",
      },
      {
        id: 3,
        name: "《梅林的预言》国家关系",
        date: "2023-11-25",
      },
      {
        id: 4,
        name: "《梅林的预言》国家选择",
        date: "2023-11-25",
      },
      {
        id: 5,
        name: "《梅林的预言》天下攻略",
        date: "2023-11-25",
      },
      {
        id: 6,
        name: "《梅林的预言》新手入门",
        date: "2023-11-25",
      },
      {
        id: 7,
        name: "《梅林的预言》征战活动",
        date: "2023-11-25",
      },
    ],
  },
  {
    name: "客服中心",
    id: 3,
    child: [
      {
        id: 1,
        name: "客服中心详情",
        date: "2023-11-25",
      },
    ],
  },
];

const goToDetails = (father: number, child: number) => {
  router.push({
    path: "/gameInfo",
    query: {
      father,
      child,
    },
  });
};

const selectSlider = (num: number) => {
  mySwiperRef.value.slideTo(num, 1000, false);
};
</script>

<style scoped lang="less">
.home {
  background-color: #000;
  .bg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../assets/imgs/bg.png");
    background-size: cover;
    min-height: 100vh;
    .logoCls {
      width: 263px;
      height: 70px;
      margin-top: 143px;
      margin-left: 31px;
      margin-right: auto;
    }
    .btn {
      margin-top: 15vh;
      .btnContent {
        position: relative;
        width: 540px;
        display: flex;
        align-items: center;
        justify-content: center;
        .btnBg {
          width: 302px;
          position: absolute;
        }
        .btnFont {
          width: 148px;
          position: absolute;
        }
      }
    }
    .actives {
      width: 100%;
      margin-top: 8vh;
      .swiper-slide {
        display: flex;
        justify-content: center;
      }
      img {
        width: 540px;
      }
    }

    .info {
      width: 100%;
      margin-top: 5vh;
      color: #fff;
      padding: 0 30px;
      .infoSelect {
        display: flex;
        position: relative;
        // border-bottom: solid 2px #eeeceb;

        .selectItemCls {
          position: relative;
          padding-bottom: 30px;
          margin-right: 50px;
        }
        .isSelect {
          border-bottom: solid 4px #5477d1;
        }
        .line {
          position: absolute;
          width: 100%;
          height: 3px;
          background-color: #fff;
          bottom: 0;
        }
      }
      .selectContent {
        .contentItem {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
        }
        .more {
          margin-top: 20px;
          text-align: center;
        }
      }
    }
    .heartbeat {
      -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
      animation: heartbeat 1.5s ease-in-out infinite both;
    }
    @keyframes heartbeat {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(0.9);
      }
      100% {
        transform: scale(1);
      }
    }
  }
  .page {
    .logoCls {
      width: 263px;
      height: 70px;
      margin-left: 31px;
      margin-right: auto;
    }
    // height: 100vh;
    padding: 0 30px 50px 30px;
    .small_sliders {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 200px;
      .sliderItem {
        width: 25%;
        display: flex;
        align-items: flex-end;
        .sImage {
          margin: 0 auto;
          width: 70%;
          // width: 100px;
        }
        .isSlide {
          width: 100%;
          transition: 0.5s ease;
        }
      }
    }
    .big_sliders {
      margin-top: 80px;
      .bImage {
        opacity: 0.75;
      }
      .isSlide {
        opacity: 1;
      }
    }
    .document {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      margin-top: 30px;
      .title {
        font-size: 30px;
      }
      .tips {
        margin-top: 30px;
        text-align: center;
        line-height: 1.5;
      }
      .reserved {
        margin-top: 10px;
        line-height: 1.5;
        color: #c6c6cc;
        font-size: 20px;
      }
      .company {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #c6c6cc;
        font-size: 20px;
      }
    }
  }
}
</style>
